<template>
    <div class="layer" :style="layerStyle" ref="layerRef" @click.stop="onClickLayer">
        <div class="title">{{ data.layer_name }}</div>
        <div class="content">
            <div v-for="(arg, index) in data.layer_args" :key="index" class="propety-entry">
                <div class="property-key">{{ typeof arg === 'object' ? Object.keys(arg)[0] : '' }}</div>
                <div class="property-value">{{ typeof arg === 'object' ? JSON.stringify(Object.values(arg)[0]) : arg }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';

const props = defineProps({
    data: Object,
    position: {
        type: Object,
        required: true
    },
    layer: {
        type: Number,
        required: true
    },
    index: {
        type: Number,
        required: true
    }
});

const layerStyle = computed(() => ({
    position: 'absolute',
    left: `${props.position.x}px`,
    top: `${props.position.y}px`,
    minWidth: '150px',
    padding: '10px',
    border: '1px solid #ddd',
    backgroundColor: '#f9f9f9'
}));

const layerRef = ref(null);

function onClickLayer() {
    const layerRect = layerRef.value.getBoundingClientRect();
    console.log(`layer = ${props.layer} position = `, props.position);
    console.log(`layerRect = `, layerRect);
}

function getBlockRect() {
    const layerRect = layerRef.value.getBoundingClientRect();
    return layerRect;
}

onMounted(() => {
    // console.log(props.data.layer_args);
});

defineExpose({ getBlockRect });
</script>

<style scoped>
.title {
    background-color: #edd397;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

.content {
    background-color: #fff;
    padding: 10px;
}

.propety-entry {
    display: flex;
    justify-content: space-between;
    min-width: 200px;
    cursor: pointer;
    padding: 5px 10px;
}

.propety-entry:hover {
    background-color: #f9f5e8;
}
</style>
